.container-add {
            background: linear-gradient(157deg, rgba(127, 0, 0, 1) 9%, rgba(255, 0, 0, 1) 92%);
            width: 250px;
            height: 120px;
            padding: 20px;
            border-radius: 50px;
            position: fixed;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            bottom: 0;
            right: 0;
            margin: 1rem;
            z-index: 999;
        }
        
        .container-add::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -20px; /* Triángulo alineado al lado derecho */
            transform: translateY(30%);
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 27px solid rgb(217, 8, 8); 
            transform: rotate(22deg);
            
        }
        
        .title-main-add {
            font-size: 1.05rem;
            font-weight: 700;
            color: white;
            margin-bottom: 15px;
        }
        
        .c-img {
            display: flex;
            justify-content: space-around;
        }
        
        .C-add-x{
            height: 25px;
            background-color: #0000;
            position: absolute;
            display: flex;
            right: 10px;
            top: 7px;
            padding: 5px;
            margin-right: 1px;
            border-radius: 50%;
            cursor: pointer;
            filter: invert();
        }
        
        .box, .box_ {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            cursor: pointer;
            padding: 3px;
        }
        
        .box img,
        .box_ img{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            transition: filter 0.3s ease;
        }

        .box:hover .text-add,
        .box_:hover .text-add {
          color: #f7e736;
        }
        
        .text-add {
            font-size: 0.7rem;
            transition: color 0.3s ease;
            color: var(--color-white);
        }

        .box:hover img,
        .box_:hover img {
    filter: brightness(0) saturate(100%) invert(69%) sepia(88%) 
            saturate(580%) hue-rotate(0deg) brightness(101%) contrast(104%);
}


.box:hover .text-add {
    color: #f7e736;
}



        
        .C-w-add{
            background-color: #1AD782;
            font-family: "Roboto",Sans-serif;
            display: flex;
            border: none;
            border-radius: 50%;
            fill: #052F3B;
            box-shadow: 0px 6px 33px 0 rgba(5,99,73,.5019607843137255);padding: 15px;
            font-weight: 650;
            margin: 1rem;
            justify-content: center;
            align-items: center;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 999;
            cursor: pointer;
        }
        
        .C-w-add img{
            width: 30px;
            height: 30px;
        }

        @media only screen and (max-width: 768px) {
          .container-add{
            width: 130px;
            height: 100px;
          }

          .container-add::after{

          }

          .title-main-add{
            font-size: 0.8rem;
            margin-bottom: 5px;
          }

          .box img,
          .box_ img{
              width: 25px;
              height: 25px;
              border-radius: 50%;
              padding: 1px;
          }

          .text-add{
            font-size: 0.5rem;
          }
        }